<template>
  <div class="app-container">
    <!-- 头部区域 -->
    <div class="header">
      <h1>我的账号</h1>
      <button class="add-btn" @click="handleAddAccount">
        <i class="el-icon-circle-plus-outline"/>
      </button>
    </div>

    <!-- 账号切换区域 -->
    <div class="account-switcher">
      <div class="account-tabs">
        <div
          v-for="(account, index) in accounts"
          :key="index"
          :class="{ active: currentAccountIndex === index }"
          class="account-tab"
          @click="switchAccount(index)"
        >
          {{ account.name }}
        </div>
      </div>
    </div>

    <!-- 内容区域 - 不同账号显示不同数据 -->
    <div class="content">
      <template-preview v-if="previewData.templateName" :preview-data="previewData"/>
      <el-empty v-else description="暂无配置"></el-empty>
    </div>

  </div>
</template>

<script>

import TemplatePreview from "@/layout/components/Template/TemplatePreview.vue";

export default {
  name: 'AccountManager',
  components: {TemplatePreview},
  data() {
    return {
      previewData: {
        templateName: '',
        templateConfig: []
      },
      currentAccountIndex: 0,
      accounts: [
        {
          name: '账号一',
          overview: [
            {label: '账号余额', value: '¥1,256.00'},
            {label: '本月消费', value: '¥328.50'},
            {label: '积分', value: '2,450'}
          ],
          details: {
            title: '最近交易',
            items: [
              {label: '2023-05-15', value: '-¥56.00'},
              {label: '2023-05-12', value: '-¥128.50'},
              {label: '2023-05-10', value: '+¥1,000.00'}
            ]
          }
        },
        {
          name: '我的工作账号',
          overview: [
            {label: '账号余额', value: '¥5,689.20'},
            {label: '本月消费', value: '¥1,245.80'},
            {label: '积分', value: '8,760'}
          ],
          details: {
            title: '工作项目',
            items: [
              {label: '项目A', value: '进行中'},
              {label: '项目B', value: '已完成'},
              {label: '项目C', value: '计划中'}
            ]
          }
        },
        {
          name: '个人账号',
          overview: [
            {label: '账号余额', value: '¥3,421.60'},
            {label: '本月消费', value: '¥567.30'},
            {label: '积分', value: '4,120'}
          ],
          details: {
            title: '个人收藏',
            items: [
              {label: '收藏商品', value: '12件'},
              {label: '收藏店铺', value: '5家'}
            ]
          }
        },
        {
          name: '测试账号',
          overview: [
            {label: '账号余额', value: '¥100.00'},
            {label: '测试状态', value: '活跃'}
          ],
          details: {
            title: '测试记录',
            items: [
              {label: '测试A', value: '通过'},
              {label: '测试B', value: '失败'},
              {label: '测试C', value: '待测试'}
            ]
          }
        },
        {
          name: '其他账号',
          overview: [
            {label: '账号余额', value: '¥789.50'},
            {label: '账号状态', value: '正常'}
          ],
          details: {
            title: '其他信息',
            items: [
              {label: '创建时间', value: '2023-01-15'},
              {label: '最后登录', value: '2023-05-10'}
            ]
          }
        }
      ]
    };
  },
  computed: {
    currentAccount() {
      return this.accounts[this.currentAccountIndex];
    }
  },
  methods: {
    switchAccount(index) {
      this.currentAccountIndex = index;
    },
    handleAddAccount() {
      // 这里可以添加弹窗或跳转到添加账号页面的逻辑
      alert('点击了添加账号按钮');
    }
  }
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}

.app-container {
  min-width: 320px;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f5f7fa;
}

/* 头部样式 */
.header {
  padding: 15px;
  background-color: #4A90E2;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

  h1 {
    font-size: 18px;
    font-weight: 500;
  }
}

.add-btn {
  background-color: white;
  color: #4A90E2;
  border: none;
  border-radius: 50px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  i {
    font-size: 16px;
  }
}

/* 账号切换区域 */
.account-switcher {
  padding: 12px 15px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #eee;
}

.account-tabs {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */

  &::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }
}

.account-tab {
  padding: 8px 16px;
  margin-right: 8px;
  background-color: #fff;
  border-radius: 20px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  border: 1px solid #e0e0e0;
  transition: all 0.2s ease;
  white-space: nowrap;

  &.active {
    background-color: #4A90E2;
    color: white;
    border-color: #4A90E2;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(74, 144, 226, 0.2);
  }
}

/* 内容区域 */
.content {
  padding: 20px;
}

.account-content {
  display: none;
  min-height: 400px;

  &.active {
    display: block;
    animation: fadeIn 0.3s ease;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.account-data {
  background-color: #f9f9f9;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  border: 1px solid #eee;

  h3 {
    font-size: 16px;
    margin-bottom: 10px;
    color: #4A90E2;
  }
}

.data-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;

  &:last-child {
    border-bottom: none;
  }
}

.data-label {
  color: #666;
  font-size: 14px;
}

.data-value {
  font-weight: 500;
  font-size: 14px;
}

/* 底部区域 - 预留 */
.footer {
  padding: 15px;
  background-color: #f9f9f9;
  border-top: 1px solid #eee;
  text-align: center;
  color: #999;
  font-size: 12px;
  position: absolute;
  bottom: 0;
  width: 100%;
}
</style>
